<template>
  <div>
    <el-dialog :title="meta" :visible="showDialog" @close="closeForm">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科" prop="subject">
          <el-select v-model="form.subject" placeholder="请选择">
            <el-option label="超级管理员" value="1" />
            <el-option label="管理员" value="2" />
            <el-option label="老师" value="3" />
            <el-option label="学生" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="阶段" prop="step">
          <el-select v-model="form.step" placeholder="请选择">
            <el-option label="初级" value="1" />
            <el-option label="中级" value="2" />
            <el-option label="高级" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterprise">
          <el-select v-model="form.enterprise" placeholder="请选择">
            <el-option label="超级管理员" value="1" />
            <el-option label="管理员" value="2" />
            <el-option label="老师" value="3" />
            <el-option label="学生" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-select v-model="form.city" placeholder="请选择">
            <el-option label="超级管理员" value="1" />
            <el-option label="管理员" value="2" />
            <el-option label="老师" value="3" />
            <el-option label="学生" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="form.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="试题标题" prop="title">
          <quill-editor
            ref="myQuillEditor"
            v-model="form.title"
            style="margin-top: 50px; margin-left: -80px"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
            @ready="onEditorReady($event)"
          />
        </el-form-item>
        <el-form-item label="单选" prop="single_select_answer">
          <el-radio-group v-model="form.single_select_answer">
            <el-radio label="A" style="display: block; margin-bottom: 10px">
              A
              <el-input v-model="form.A" />
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-radio>
            <el-radio label="B" style="display: block; margin-bottom: 10px">
              B
              <el-input v-model="form.B" />
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-radio>
            <el-radio label="C" style="display: block; margin-bottom: 10px">
              C
              <el-input v-model="form.C" />
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-radio>
            <el-radio label="D" style="display: block; margin-bottom: 10px">
              D
              <el-input v-model="form.D" />
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-radio>
            <el-radio
              style="display: block; margin-bottom: 10px; display: none"
            >
              D
              <el-input v-model="form.remark" />
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="解析视频" class="video">
          <!-- action必选参数, 上传的地址 -->
          <el-upload
            class="avatar-uploader el-upload--text"
            action="上传视频的后台地址"
            :show-file-list="false"
            :on-success="handleVideoSuccess"
            :before-upload="beforeUploadVideo"
            :on-progress="uploadVideoProcess"
          >
            <video
              v-if="videoForm.storageurl != '' && videoFlag == false"
              :src="videoForm.storageurl"
              class="avatar"
              controls="controls"
            >
              您的浏览器不支持视频播放
            </video>
            <i
              v-else-if="videoForm.storageurl == '' && videoFlag == false"
              class="el-icon-plus avatar-uploader-icon"
            />
            <el-progress
              v-if="videoFlag == true"
              type="circle"
              :percentage="videoUploadPercent"
              style="margin-top: 30px"
            />
          </el-upload>
        </el-form-item>

        <el-form-item label="答案解析" prop="answer_analyze">
          <quill-editor
            ref="myQuillEditor"
            v-model="form.answer_analyze"
            style="margin-top: 50px; margin-left: -80px"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
            @ready="onEditorReady($event)"
          />
        </el-form-item>
        <el-form-item label="试题备注" prop="remark">
          <el-input v-model="form.remark" />
        </el-form-item>
        <el-form-item style="display: flex; justify-content: center">
          <el-button @click="closeForm">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addQuest, editQuest } from '../../../api/questionBank'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      videoFlag: false,
      videoForm: {
        storageurl: ''
      },
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [
              {
                size: [
                  '12',
                  '14',
                  '16',
                  '18',
                  '20',
                  '22',
                  '24',
                  '28',
                  '32',
                  '36'
                ]
              }
            ], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      },
      meta: '新增题库测试',
      showDialog: false,
      form: {
        select_options: [],
        type: '1'
      },
      imageUrl: '',
      formLabelWidth: '120px',
      rules: {
        subject: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        step: [{ required: true, message: '请输入', trigger: 'blur' }],
        enterprise: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        city: [{ required: true, message: '请输入', trigger: 'blur' }],
        difficulty: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请输入', trigger: 'blur' }],
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        remark: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        single_select_answer: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        answer_analyze: [
          { required: true, message: '请输入企业简介', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 验证视频格式
    beforeUploadVideo(file) {
      if (
        [
          'video/mp4',
          'video/ogg',
          'video/flv',
          'video/avi',
          'video/wmv',
          'video/rmvb'
        ].indexOf(file.type) === -1
      ) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
    },
    // 上传进度显示
    uploadVideoProcess(event, file, fileList) {
      console.log(event.percent, file, fileList)
      this.videoFlag = true
      this.videoUploadPercent = Math.floor(event.percent)
    },
    // 获取上传图片地址
    handleVideoSuccess(res, file) {
      this.videoFlag = false
      this.videoUploadPercent = 0
      if (res.status === 200) {
        console.log(res.data)
        this.videoForm.storageurl = res.data
      } else {
        this.$message.error('视频上传失败，请重新上传！')
      }
    },
    onEditorBlur() {},
    onEditorFocus() {},
    onEditorChange() {},
    onEditorReady() {},
    submitForm() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          if (this.meta === '新增题库测试') {
            const res = await addQuest({
              ...this.form,
              type: Number(this.form.type)
            })
            console.log(res)
            this.$message.success('新增题库成功')
          } else {
            const res = await editQuest(this.form)
            console.log(res)
            this.$message.success('编辑题库成功')
          }
          this.closeForm()
          this.$emit('getQuestList')
        } else {
          this.$message.success('校验不通过')
          return false
        }
      })
    },
    closeForm() {
      this.form = {}
      this.showDialog = false
      this.$refs.form.resetFields()
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
::v-deep {
  .el-icon-plus {
    border: 1px dashed #ccc;
  }
  .avatar-uploader {
    display: inline-block;
  }
  .el-form {
    width: 832px;
    margin: 0 auto;
  }
  .el-dialog {
    width: 100%;
    margin: 0 !important;
  }
  .el-dialog__header {
    background-color: #07b3fa;
    text-align: center;
  }
  .el-dialog__title,
  .el-dialog__close {
    color: #fff;
  }
  .el-dialog__close:hover {
    color: #fff;
  }
}
.video {
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9 !important;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .avatar-uploader .el-upload:hover {
    border: 1px dashed #d9d9d9 !important;
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 300px;
    height: 178px;
    display: block;
  }
}
</style>
